<template>
  <div v-if="model" class="editviews">
    <div style="margin-bottom: 10px"><nav-bar /></div>
    <div class="uploadfile">
      <van-uploader
        class="uploadImg"
        preview-size="100vw"
        :after-read="afterRead"
      />
      <edit-banner left="头像">
        <img v-if="model.user_img" :src="model.user_img" slot="right" alt="" />
        <img src="~images/head_img.png" slot="right" alt="" v-else />
      </edit-banner>
    </div>

    <edit-banner left="昵称" @clickbanner="show = true">
      <a href="javascript:;" slot="right">{{ model.name }}</a>
    </edit-banner>
    <edit-banner left="账号">
      <a href="javascript:;" slot="right">{{ model.username }}</a>
    </edit-banner>
    <edit-banner left="性别" @clickbanner="genders = true">
      <a href="javascript:;" slot="right">{{ model.gender }}</a>
    </edit-banner>
    <edit-banner left="个性签名" @clickbanner="textshow = true">
      <a href="javascript:;" slot="right">{{ model.user_desc }}</a>
    </edit-banner>

    <div class="editback" @click="$router.back()">返回个人中心</div>
    <van-dialog
      v-model="show"
      title="昵称"
      show-cancel-button
      @confirm="confirmClick"
      @cancel="content = ''"
    >
      <van-field v-model="content" autofocus />
    </van-dialog>
    <van-dialog
      v-model="textshow"
      title="个签"
      type="textarea"
      show-cancel-button
      @confirm="textareaClick"
      @cancel="content = ''"
    >
      <van-field v-model="content" autofocus />
    </van-dialog>
    <van-action-sheet
      cancel-text="取消"
      v-model="genders"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>

<script>
  import NavBar from '@/components/common/Navbar.vue'
  import EditBanner from '@/components/common/editBanner.vue'
  export default {
    data() {
      return {
        model: {},
        show: false,
        textshow: false,
        genders: false,
        content: '',
        actions: [
          { name: '男', val: 1 },
          { name: '女', val: 0 },
        ],
      }
    },
    components: {
      NavBar,
      EditBanner,
    },
    methods: {
      async selectUser() {
        const res = await this.$http.get('/user/' + localStorage.getItem('id'))
        console.log(res.data[0])
        this.model = res.data[0]
      },
      async afterRead(file) {
        const fromdata = new FormData()
        fromdata.append('file', file.file)
        const res = await this.$http.post('/upload', fromdata)
        this.model.user_img = res.data.url
        this.UserUpdate()
      },
      async UserUpdate() {
        const res = await this.$http.post(
          '/update/' + localStorage.getItem('id'),
          this.model
        )
        if (res.data.code == 200) {
          this.$msg.success('修改成功')
        }
      },

      confirmClick() {
        this.model.name = this.content
        this.UserUpdate()
        this.content = ''
      },
      textareaClick() {
        this.model.user_desc = this.content
        this.UserUpdate()
        this.content = ''
      },
      onSelect(item) {
        this.model.gender = item.name
        this.UserUpdate()
        this.genders = false
      },
    },
    created() {
      this.selectUser()
    },
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'

  .van-popup--bottom
    left: 50%

  .editviews a
    color: #333333

  .editviews img
    height: 12.778vw
    width: 12.778vw
    border-radius: 50%

  .uploadfile
    position: relative
    overflow: hidden

    .uploadImg
      opacity: 0 // 透明度
      position: absolute

  .editback
    margin-top: 5.556vw
    background-color: white
    centerStyle()
    color: #999
    padding: 4.444vw 0
    font-size: 4vw
    cursor: pointer
</style>